<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --f-color:pink;
            --b-color:red;
        }
        .nav {
            color: var(--f-color);
            background-color: var(--b-color);
            /* 局部定义 */
            --fz :20px;
            font-size: var(--fz);
        }
        .main {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 100px;
            width: 700px;
            
        }
        .box {
            width: calc(33.333% - (20px * 2)/3);
            /* width: 300px; */
            height: 100px;
            background-color: var(--f-color);
        }

    </style>
</head>
<body>
    <!-- 定义变量 --变量名--color:
    使用变量：var(--color);
    作用域：全局变量
    :root{}
    局部在选择器里面{}仅仅影响该元素和他的子元素 
    计算
    calc()运算符周围要有空格
    -->
    <div class="nav">
        <a href="#">456</a>
    </div>
    <div class="main">
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
    </div>
</body>
</html>